import React, { useState } from 'react';
import { Users, FileText, Eye, CheckCircle, ArrowRight, Clock, Target } from 'lucide-react';

const DesignTemplate = ({ onBack }) => {
  const [activeTab, setActiveTab] = useState('scenarios');

  const tabs = [
    { id: 'scenarios', name: '用户场景与用例', icon: Users },
    { id: 'prd', name: 'PRD产品需求文档', icon: FileText },
    { id: 'prototype', name: '交互原型展示', icon: Eye }
  ];

  const UserScenariosTemplate = () => (
    <div className="space-y-6">
      <div className="bg-blue-50 rounded-lg p-6 border border-blue-200">
        <h3 className="text-xl font-bold text-blue-900 mb-4">用户角色定义</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            {
              role: "ESG数据分析师",
              description: "负责收集、整理和分析ESG相关数据",
              responsibilities: ["数据收集与验证", "报告生成", "趋势分析", "合规检查"],
              painPoints: ["数据来源分散", "手工处理效率低", "报告格式不统一"],
              scenarios: ["月度数据收集", "年度报告生成", "合规审核"]
            },
            {
              role: "ESG经理",
              description: "制定ESG策略并监督执行",
              responsibilities: ["策略制定", "目标设定", "进度监控", "风险管控"],
              painPoints: ["缺乏实时数据", "决策依据不足", "跨部门协调困难"],
              scenarios: ["策略规划", "目标管理", "绩效评估"]
            }
          ].map((user, index) => (
            <div key={index} className="bg-white rounded-lg p-4 border">
              <h4 className="font-bold text-gray-900 mb-2">{user.role}</h4>
              <p className="text-sm text-gray-600 mb-3">{user.description}</p>
              
              <div className="space-y-2">
                <div>
                  <h5 className="text-xs font-medium text-gray-700 mb-1">主要职责</h5>
                  <div className="flex flex-wrap gap-1">
                    {user.responsibilities.map((resp, i) => (
                      <span key={i} className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded">
                        {resp}
                      </span>
                    ))}
                  </div>
                </div>
                
                <div>
                  <h5 className="text-xs font-medium text-gray-700 mb-1">主要痛点</h5>
                  <div className="flex flex-wrap gap-1">
                    {user.painPoints.map((pain, i) => (
                      <span key={i} className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded">
                        {pain}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-green-50 rounded-lg p-6 border border-green-200">
        <h3 className="text-xl font-bold text-green-900 mb-4">核心业务场景</h3>
        <div className="space-y-4">
          {[
            {
              title: "月度ESG数据收集",
              goal: "收集和整理当月ESG相关数据",
              trigger: "每月月底系统自动提醒",
              steps: ["数据源确认", "数据收集", "数据验证", "数据入库"],
              result: "完整的月度ESG数据集"
            },
            {
              title: "年度ESG报告生成",
              goal: "生成符合披露要求的年度ESG报告",
              trigger: "年度报告制作周期开始",
              steps: ["模板选择", "数据汇总", "报告编写", "审核发布"],
              result: "符合标准的年度ESG披露报告"
            }
          ].map((scenario, index) => (
            <div key={index} className="bg-white rounded-lg p-4 border">
              <div className="flex items-center justify-between mb-3">
                <h4 className="font-bold text-gray-900">{scenario.title}</h4>
                <span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">P{index + 1}</span>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div>
                  <p><strong>场景目标:</strong> {scenario.goal}</p>
                  <p><strong>触发条件:</strong> {scenario.trigger}</p>
                  <p><strong>预期结果:</strong> {scenario.result}</p>
                </div>
                <div>
                  <h5 className="font-medium text-gray-700 mb-1">主要步骤</h5>
                  <div className="space-y-1">
                    {scenario.steps.map((step, i) => (
                      <div key={i} className="flex items-center space-x-2">
                        <span className="w-4 h-4 bg-green-500 text-white text-xs rounded-full flex items-center justify-center">
                          {i + 1}
                        </span>
                        <span>{step}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-purple-50 rounded-lg p-6 border border-purple-200">
        <h3 className="text-xl font-bold text-purple-900 mb-4">业务流程设计</h3>
        <div className="bg-white rounded-lg p-4 border">
          <h4 className="font-bold text-gray-900 mb-3">ESG数据收集流程（泳道图示例）</h4>
          <div className="space-y-3">
            <div className="flex items-center space-x-4 p-3 bg-gray-50 rounded">
              <div className="w-24 text-sm font-medium">数据源</div>
              <ArrowRight className="w-4 h-4 text-gray-400" />
              <div className="flex-1">提供原始数据</div>
            </div>
            <div className="flex items-center space-x-4 p-3 bg-blue-50 rounded">
              <div className="w-24 text-sm font-medium">分析师</div>
              <ArrowRight className="w-4 h-4 text-gray-400" />
              <div className="flex-1">收集、验证、处理数据</div>
            </div>
            <div className="flex items-center space-x-4 p-3 bg-green-50 rounded">
              <div className="w-24 text-sm font-medium">系统</div>
              <ArrowRight className="w-4 h-4 text-gray-400" />
              <div className="flex-1">自动计算、生成报表</div>
            </div>
            <div className="flex items-center space-x-4 p-3 bg-yellow-50 rounded">
              <div className="w-24 text-sm font-medium">经理</div>
              <ArrowRight className="w-4 h-4 text-gray-400" />
              <div className="flex-1">审核、批准、发布</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const PRDTemplate = () => (
    <div className="space-y-6">
      <div className="bg-green-50 rounded-lg p-6 border border-green-200">
        <h3 className="text-xl font-bold text-green-900 mb-4">产品概览</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-4">
            <div className="bg-white rounded-lg p-4 border">
              <h4 className="font-bold text-gray-900 mb-2">产品定位</h4>
              <p className="text-sm text-gray-600">
                面向企业ESG管理的一体化数据管理平台，提供数据收集、分析、报告生成的完整解决方案
              </p>
            </div>
            
            <div className="bg-white rounded-lg p-4 border">
              <h4 className="font-bold text-gray-900 mb-2">目标用户</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• 大中型企业ESG团队</li>
                <li>• ESG数据分析师</li>
                <li>• 合规管理人员</li>
                <li>• 高级管理层</li>
              </ul>
            </div>
          </div>
          
          <div className="space-y-4">
            <div className="bg-white rounded-lg p-4 border">
              <h4 className="font-bold text-gray-900 mb-2">核心价值</h4>
              <ul className="text-sm text-gray-600 space-y-1">
                <li>• 提高数据收集效率80%</li>
                <li>• 减少报告制作时间60%</li>
                <li>• 确保合规要求100%覆盖</li>
                <li>• 支持多标准框架</li>
              </ul>
            </div>
            
            <div className="bg-white rounded-lg p-4 border">
              <h4 className="font-bold text-gray-900 mb-2">成功指标</h4>
                             <ul className="text-sm text-gray-600 space-y-1">
                 <li>• 用户活跃度 &gt; 85%</li>
                 <li>• 数据准确率 &gt; 99%</li>
                 <li>• 报告生成时间 &lt; 2小时</li>
                 <li>• 客户满意度 &gt; 4.5分</li>
               </ul>
            </div>
          </div>
        </div>
      </div>

      <div className="bg-blue-50 rounded-lg p-6 border border-blue-200">
        <h3 className="text-xl font-bold text-blue-900 mb-4">功能需求</h3>
        <div className="space-y-4">
          {[
            {
              module: "数据收集管理",
              priority: "P0",
              features: [
                { name: "多源数据接入", acceptance: "支持Excel、API、数据库等多种数据源" },
                { name: "数据验证规则", acceptance: "自定义验证规则，确保数据质量" },
                { name: "数据映射配置", acceptance: "灵活的字段映射和数据转换" }
              ]
            },
            {
              module: "计算引擎",
              priority: "P0", 
              features: [
                { name: "碳排放计算", acceptance: "支持三范围碳排放计算" },
                { name: "自定义公式", acceptance: "用户可配置计算公式" },
                { name: "批量计算", acceptance: "支持大批量数据并行计算" }
              ]
            }
          ].map((module, index) => (
            <div key={index} className="bg-white rounded-lg p-4 border">
              <div className="flex items-center justify-between mb-3">
                <h4 className="font-bold text-gray-900">{module.module}</h4>
                <span className={`px-2 py-1 text-xs rounded ${
                  module.priority === 'P0' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700'
                }`}>
                  {module.priority}
                </span>
              </div>
              
              <div className="space-y-2">
                {module.features.map((feature, i) => (
                  <div key={i} className="border-l-4 border-blue-300 pl-3">
                    <h5 className="font-medium text-gray-800">{feature.name}</h5>
                    <p className="text-sm text-gray-600">{feature.acceptance}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-orange-50 rounded-lg p-6 border border-orange-200">
        <h3 className="text-xl font-bold text-orange-900 mb-4">非功能需求</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            {
              category: "性能要求",
              requirements: [
                                 "页面加载时间 &lt; 3秒",
                 "数据查询响应 &lt; 1秒",
                 "并发用户数 &gt; 1000",
                 "系统可用性 &gt; 99.9%"
              ]
            },
            {
              category: "安全要求", 
              requirements: [
                "数据传输SSL加密",
                "用户权限分级管理",
                "操作日志完整记录",
                "定期安全备份"
              ]
            },
            {
              category: "可用性要求",
              requirements: [
                "界面符合无障碍标准",
                "支持多语言切换",
                "响应式设计适配",
                "操作流程简化"
              ]
            },
            {
              category: "兼容性要求",
              requirements: [
                "Chrome/Firefox/Safari",
                "移动端浏览器支持",
                "IE11基础功能支持",
                "API向下兼容"
              ]
            }
          ].map((category, index) => (
            <div key={index} className="bg-white rounded-lg p-4 border">
              <h4 className="font-bold text-gray-900 mb-2">{category.category}</h4>
              <ul className="space-y-1">
                {category.requirements.map((req, i) => (
                  <li key={i} className="flex items-center space-x-2 text-sm text-gray-600">
                    <CheckCircle className="w-3 h-3 text-green-500" />
                    <span>{req}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  const PrototypeTemplate = () => (
    <div className="space-y-6">
      <div className="bg-purple-50 rounded-lg p-6 border border-purple-200">
        <h3 className="text-xl font-bold text-purple-900 mb-4">界面原型示例</h3>
        <div className="bg-white rounded-lg p-4 border">
          <div className="text-center text-gray-500 p-8 border-2 border-dashed border-gray-300 rounded-lg">
            <Eye className="w-12 h-12 mx-auto mb-4 text-gray-400" />
            <h4 className="text-lg font-medium mb-2">交互原型展示区域</h4>
            <p className="text-sm">
              在实际项目中，这里应该包含：<br/>
              • 可点击的界面元素<br/>
              • 真实的数据展示<br/>
              • 完整的操作流程<br/>
              • 状态变化演示
            </p>
          </div>
        </div>
      </div>

      <div className="bg-blue-50 rounded-lg p-6 border border-blue-200">
        <h3 className="text-xl font-bold text-blue-900 mb-4">功能演示清单</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            {
              function: "数据收集流程",
              demos: ["数据源配置", "数据导入", "验证结果", "错误处理"]
            },
            {
              function: "报告生成",
              demos: ["模板选择", "数据筛选", "报告预览", "导出功能"]
            },
            {
              function: "仪表板展示",
              demos: ["关键指标", "趋势图表", "钻取分析", "实时更新"]
            },
            {
              function: "用户管理",
              demos: ["角色分配", "权限设置", "操作日志", "安全认证"]
            }
          ].map((item, index) => (
            <div key={index} className="bg-white rounded-lg p-4 border">
              <h4 className="font-bold text-gray-900 mb-2">{item.function}</h4>
              <div className="space-y-1">
                {item.demos.map((demo, i) => (
                  <div key={i} className="flex items-center space-x-2 text-sm">
                    <Target className="w-3 h-3 text-blue-500" />
                    <span className="text-gray-600">{demo}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-green-50 rounded-lg p-6 border border-green-200">
        <h3 className="text-xl font-bold text-green-900 mb-4">数据可视化要求</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {[
            {
              type: "仪表板设计",
              elements: ["KPI指标卡", "趋势图表", "进度展示", "告警提示"]
            },
            {
              type: "图表类型",
              elements: ["柱状图", "折线图", "饼图", "散点图"]
            },
            {
              type: "交互功能",
              elements: ["数据筛选", "时间范围", "钻取分析", "导出下载"]
            }
          ].map((category, index) => (
            <div key={index} className="bg-white rounded-lg p-4 border">
              <h4 className="font-bold text-gray-900 mb-2">{category.type}</h4>
              <div className="space-y-1">
                {category.elements.map((element, i) => (
                  <span key={i} className="block px-2 py-1 bg-green-100 text-green-700 text-xs rounded">
                    {element}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  const renderContent = () => {
    switch (activeTab) {
      case 'scenarios': return <UserScenariosTemplate />;
      case 'prd': return <PRDTemplate />;
      case 'prototype': return <PrototypeTemplate />;
      default: return <UserScenariosTemplate />;
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
      {/* 头部 */}
      <div className="bg-white shadow-lg border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="p-2.5 bg-gradient-to-br from-green-600 to-blue-600 rounded-xl shadow-lg">
                <FileText className="w-7 h-7 text-white" />
              </div>
              <div>
                <h1 className="text-2xl font-bold bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
                  三段式设计模板
                </h1>
                <p className="text-gray-600 text-sm">标准化的模块设计参考模板</p>
              </div>
            </div>
            
            {onBack && (
              <button
                onClick={onBack}
                className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
              >
                <ArrowRight className="w-4 h-4 rotate-180" />
                <span>返回教程</span>
              </button>
            )}
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 py-6">
        {/* 标签导航 */}
        <div className="bg-white rounded-lg shadow-md p-2 mb-6">
          <div className="flex space-x-2">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`flex items-center space-x-2 px-4 py-3 rounded-lg font-medium transition-colors ${
                    activeTab === tab.id
                      ? 'bg-blue-100 text-blue-700 border border-blue-200'
                      : 'text-gray-600 hover:bg-gray-100'
                  }`}
                >
                  <Icon className="w-4 h-4" />
                  <span className="text-sm">{tab.name}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* 内容区域 */}
        {renderContent()}
      </div>
    </div>
  );
};

export default DesignTemplate; 